<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="applicable-device" content="mobile">
    <meta name="author" content="xubing" />
    <title>订单详情</title>
    <link rel="apple-touch-icon" href="../img/logo100.png">
    <link rel="icon" href="../img/logo100.png">
    <link rel="stylesheet" type="text/css" href="../lisp/vant/css/vantCss.css?rev=@@hash" />
    <link rel="stylesheet" type="text/css" href="../lisp/swiper/swiper.min.css?rev=@@hash" />
    <link rel="stylesheet" type="text/css" href="../css/common.min.css?rev=@@hash" />
    <!-- 自己的css -->
    <link rel="stylesheet" type="text/css" href="../css/orderDetails.css?rev=@@hash" />
</head>

<body>
    <div class="hui"></div>
    <div class="bai"></div>
    <div class="hintInfo"></div>
    <div class="loadImgBox">
        <img class="loadImg" src="../img/load.gif?v= 7f0d7ae" />
    </div>
    <div id="app" v-cloak>
        <div v-html="aliPay"></div>
        <div class="orderStatus">
            <!-- 等待支付 -->
            <div class="waitPay margin-b" v-if="orderDetailData.orderStatus==10">
                <p>等待买家付款</p>
                <p>剩余：<span v-text="time" style="display: inline-block; width: 38px"></span>分钟自动关闭</p>
            </div>
        </div>
        <div class="userInfo">
            <p><i v-text="orderDetailData.consignee"></i> <span style="margin-left: 12px" v-text="subPhone(orderDetailData.mobile) "></span></p>
            <p v-text="orderDetailData.province+orderDetailData.city+orderDetailData.district+orderDetailData.address"></p>
        </div>
        <div class="order-list">
            <div v-for="item in goodsList" :key="" class="pack">
                <!-- 等待发货 -->
                <div class="waitOut" v-if="orderDetailData.orderStatus==20">
                    <img src="../img/order/timeH.png" style="display:inline-block"><span style="vertical-align: middle;">等待发货</span>
                </div>
                <!-- 配货中 -->
                <div class="allocation" v-else-if="item.packStatus==21">
                    <img src="../img/order/peihuo.png" style="display:inline-block"><span style="vertical-align: middle;">配货中</span>
                </div>
                <!-- 已发货 -->
                <div class="waitIn" v-else-if="item.packStatus==22" @click="location.href='logistics.html?orderId='+orderDetailData.orderId+'&packId='+item.packId">
                    <img src="../img/order/car.png" style="display:inline-block">
                    <div class="waitIn-info">

                        <span style="vertical-align: middle;" :id="item.packId" v-text="newLogistics(orderDetailData.orderId,item.packId)"></span>
                        <p :class="item.packId"></p>
                    </div>
                    <i class="van-icon van-icon-arrow van-cell__right-icon" style="float:right;margin-top: 8px"></i>
                </div>
                <!-- 已完成 -->
                <div class="waitIn" v-else-if="item.packStatus==30" @click="location.href='logistics.html?orderId='+orderDetailData.orderId+'&packId='+item.packId">
                    <img src="../img/order/car.png" style="display:inline-block">
                    <div class="waitIn-info">
                        <span style="vertical-align: middle;" :id="item.packId" v-text="newLogistics(orderDetailData.orderId,item.packId)"></span>
                        <p :class="item.packId"></p>
                    </div>
                    <i class="van-icon van-icon-arrow van-cell__right-icon" style="float:right;margin-top: 8px"></i>
                </div>
                <div v-for="item in item.goodsList" :key="">
                    <van-card v-if="orderDetailData.orderType==6" :num="item.num" :title="item.name" :thumb="item.imgProduct==''?'../img/404/404.png':item.imgProduct"></van-card>
                    <van-card v-else :num="item.num" :price="item.price" :desc="item.remarkProduct" :title="item.name"
                        :thumb="item.imgProduct==''?'../img/404/404.png':item.imgProduct" :origin-price="item.marketPrice"></van-card>
                </div>
            </div>
            <div class="order-money" v-if="orderDetailData.orderType!=6">
                <P>商品金额 <span v-text="'¥'+orderDetailData.goodsAmount"></span></P>
                <P>运费 <span v-text="'¥'+orderDetailData.shippingAmount"></span></P>
                <P>实付款：<span v-text="'¥'+orderDetailData.payAmount"></span></P>
            </div>
            <div class="order-statistics">
                <!-- 待付款 -->
                <template v-if="orderDetailData.orderStatus==10&&orderDetailData.orderType!=6">
                    <ul>
                        <li>订单编号：<i v-text="orderDetailData.orderId"></i></li>
                        <li>创建时间：<i v-text="orderDetailData.createTime"></i></li>
                    </ul>
                    <div class="order-btn" v-if="userId==orderDetailData.uniqueCode">
                        <button class="van-button" @click="cancelOrder(orderDetailData.orderId)">取消订单</button>
                        <button class="van-button order-btn-active" @click="pay">付款</button>
                    </div>
                </template>
                <!-- 待发货 -->
                <template v-else-if="orderDetailData.orderStatus==20||orderDetailData.orderStatus==21">
                    <ul>
                        <li>订单编号：<i v-text="orderDetailData.orderId"></i></li>
                        <li>支付方式：<i v-text="orderDetailData.payChannel"></i></li>
                        <li>创建时间：<i v-text="orderDetailData.createTime"></i></li>
                        <li>付款时间：<i v-text="orderDetailData.payTime"></i></li>
                    </ul>
                    <div class="order-btn" v-if="userId==orderDetailData.uniqueCode&&orderDetailData.orderType!=6">
                        <button v-if="orderDetailData.orderStatus==20||orderDetailData.orderStatus==21" class="van-button"
                            @click="goApp">申请退款</button>
                        <button v-else-if="orderDetailData.orderStatus==40" class="van-button" @click="goApp">退款申请中</button>
                        <button v-else-if="orderDetailData.orderStatus==42" class="van-button" @click="goApp">退款已同意</button>
                        <button v-else-if="orderDetailData.orderStatus==41" class="van-button" @click="goApp">退款已拒绝</button>
                        <button v-else-if="orderDetailData.orderStatus==44||orderDetailData.orderStatus==45" class="van-button"
                            @click="goApp">退款已取消</button>
                        <button v-else-if="orderDetailData.orderStatus==46" class="van-button" @click="goApp">退款成功</button>
                    </div>
                </template>
                <!-- 已完成 -->
                <template v-else-if="orderDetailData.orderStatus==30">
                    <ul>
                        <li>订单编号：<i v-text="orderDetailData.orderId"></i></li>
                        <li>支付方式：<i v-text="orderDetailData.payChannel"></i></li>
                        <li>创建时间：<i v-text="orderDetailData.createTime"></i></li>
                        <li>付款时间：<i v-text="orderDetailData.payTime"></i></li>
                        <li>发货时间：<i v-text="orderDetailData.fhTime"></i></li>
                    </ul>
                    <div class="order-btn">
                    </div>
                </template>
                <!-- 异常订单 -->
                <template v-else-if="orderDetailData.orderStatus==32">
                    <ul>
                        <li>订单编号：<i v-text="orderDetailData.orderId"></i></li>
                        <li>支付方式：<i v-text="orderDetailData.payChannel"></i></li>
                        <li>创建时间：<i v-text="orderDetailData.createTime"></i></li>
                        <li>付款时间：<i v-text="orderDetailData.payTime"></i></li>
                        <li>订单异常时间：<i v-text="orderDetailData.exceTime"></i></li>
                        <li>异常说明：<i v-text="orderDetailData.exception"></i></li>
                    </ul>
                    <div class="order-btn">
                        <button v-if="userId==orderDetailData.uniqueCode" class="van-button" @click="mounted(orderDetailData.orderId)">删除</button>
                    </div>
                </template>
                <!-- 已发货 -->
                <template v-else-if="orderDetailData.orderStatus==22">
                    <ul>
                        <li>订单编号：<i v-text="orderDetailData.orderId"></i></li>
                        <li>支付方式：<i v-text="orderDetailData.payChannel"></i></li>
                        <li>创建时间：<i v-text="orderDetailData.createTime"></i></li>
                        <li>付款时间：<i v-text="orderDetailData.payTime"></i></li>
                        <li>发货时间：<i v-text="orderDetailData.fhTime"></i></li>
                    </ul>
                    <div class="order-btn">
                        <button class="van-button" @click="location.href='logistics.html?orderId='+orderDetailData.orderId">查看物流</button>
                        <button v-if="userId==orderDetailData.uniqueCode" class="van-button order-btn-active" @click="confirmOrder(orderDetailData.orderId)">确认收货</button>
                    </div>
                </template>
                <!-- 交易关闭 -->
                <template v-else-if="orderDetailData.orderStatus==31">
                    <ul>
                        <li>订单编号：<i v-text="orderDetailData.orderId"></i></li>
                        <li>创建时间：<i v-text="orderDetailData.createTime"></i></li>
                        <li>取消时间：<i v-text="orderDetailData.canlTime"></i></li>
                    </ul>
                    <div class="order-btn">
                        <button v-if="userId==orderDetailData.uniqueCode" class="van-button" @click="mounted(orderDetailData.orderId)">删除</button>
                    </div>
                </template>
            </div>
        </div>
        <van-popup v-model="show" position="bottom" :overlay="true">
            <div class="title">
                选择支付方式
                <i class="iconfont" style="float: right;" @click="close">&#xe63e;</i>
            </div>
            <van-cell class="f1" v-show='isWx'>
                <div class="cellboxs">
                    <img src="../img/shop/weixin.png" class="imgdiboss" />
                    <span class="nm">微信</span>
                    <div>
                        <van-radio-group v-model="radio">
                            <van-radio name="4"></van-radio>
                        </van-radio-group>
                    </div>
                </div>
            </van-cell>
            <van-cell v-show='!isWx'>
                <div class="cellboxs">
                    <img src="../img/shop/zhifubao.png" class="imgdiboss" />
                    <span class="nm">支付宝</span>
                    <div>
                        <van-radio-group v-model="radio">
                            <van-radio name="5"></van-radio>
                        </van-radio-group>
                    </div>
                </div>
            </van-cell>
            <button @click='toPay' class="van-button pay-btn">
                立即支付
            </button>
        </van-popup>
    </div>
</body>
<script src="../lisp/jquery-2.1.4.min.js?rev=@@hash" type="text/javascript" charset="utf-8"></script>
<script src="../lisp/fastclick.min.js?rev=@@hash" type="text/javascript" charset="utf-8"></script>
<script src="../lisp/vue.min.js?rev=@@hash" type="text/javascript" charset="utf-8"></script>
<script src="../lisp/vant/js/vantJs.js?rev=@@hash" type="text/javascript" charset="utf-8"></script>
<script src="../lisp/vue-lazyload.js?rev=@@hash" type="text/javascript" charset="utf-8"></script>
<script src="../js/constant.js?rev=@@hash" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js?rev=@@hash" type="text/javascript" charset="utf-8"></script>
<!-- 自己的js -->
<script src="../js/orderDetails.js?rev=@@hash" type="text/javascript" charset="utf-8"></script>

</html>